<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_iPortalQueryMaps"></title>
    <script type="text/javascript" src="../../dist/openlayers/include-openlayers.js"></script>
    <style>* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    a {
        text-decoration: none
    }

    ul, li {
        list-style: none
    }

    .gallery-item {
        margin-bottom: 30px;
    }

    .gallery-item-border {
        border: 1px solid #dadada;
        -webkit-box-shadow: 0px 2px 3px #dcdcdc;
        box-shadow: 0px 2px 3px #dcdcdc;
        background: white;
    }

    .thumbnail > img, .thumbnail a > img {
        margin-right: auto;
        margin-left: auto;
    }

    .gallery-item-img {
        height: 170px !important;
        width: 262px !important;
    }

    .mapDetails {
        margin: 0px 0 12px 16px;
        height: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px !important;
        color: #7c7c7c;
    }

    .mapUserDetails {
        width: 100%;
        border-top: 1px solid #E8E8E8;
        font-size: 13px;
    }

    .textEllipsis {
        display: inline-block;
        padding-left: 10px;
        padding-top: 12px;
        padding-bottom: 12px;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mapBottomList {
        padding-left: 10px;
        padding-top: 13px;
        padding-bottom: 12px;
        vertical-align: top;
        float: right;
        padding-right: 30px;
        border-left: 1px solid #ececec;
    }

    .ip-toolbar-footer {
        text-align: center
    }

    .pagination > li {
        display: inline;
    }

    .pagination > li > a {
        position: relative;
        float: left;
        padding: 8px 16px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #737373;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ececec;
    }

    #mapListPaging > .pagination {
        margin: 10px 15px;
    }

    #mapListPaging > .pagination > li > .disable {
        pointer-events: none;
        background-color: rgba(0, 0, 0, 0.1);
    }

    #mapListPaging > .pagination > li > .active {
        background-color: #0083CB;
        color: white;
    }
    </style>
</head>
<body style=" margin: 0;overflow: auto;background: #F2F2F2;width: 100%;height:100%;position: absolute;top: 0;">
<div class="container" style="margin-bottom: 100px">
    <div class="page-header">
        <h4 data-i18n="resources.text_usageExample"></h4>
    </div>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-12">
                <!--所有Maps的承载DIV-->
                <div class="row" id="mapList">
                    <!--单个Map数据的可视化承载DIV 添加在此位置中-->
                </div>
                <!--分页切换列表-->、
                <div class="row" id="mapListFooter">
                    <div class="col-md-12">
                        <div class="ip-toolbar-footer" id="mapListPaging">
                            <ul class="pagination">
                                <li><a href="javascript:void(0)"><i class="glyphicon glyphicon-chevron-left"></i></a>
                                </li>
                                <li><a href="javascript:void(0)"><i class="glyphicon glyphicon-chevron-right"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" include="bootstrap-css,jquery" src="../js/include-web.js"></script>
<script>
    //iportal的URL地址 或根据情况添加自己的本地iportal地址：http://localhost:8091/iportal
    var iPortalUrl = "http://support.supermap.com.cn:8092";
    //默认请求的参数
    var mapsCurrentPage = 1;//默认请求第一页
    var mapsPageSize = 9;//每一页显示9条Map信息
    //全局变量，承载请求后，一共有多少页数
    var totalPages;
    var queryParams = new SuperMap.iPortalMapsQueryParam({
        currentPage: mapsCurrentPage,
        pageSize: mapsPageSize,
    });
    //Maps查询初始化工作
    var iPoortalMaps = new SuperMap.iPortal(iPortalUrl);
    $(document).ready(function () {
        //加载完DOM后，开始地图数据查询并添加
        iPoortalMaps.load().then(function () {
            queryMaps(queryParams);
        });
        //为分页列表项绑定事件
        $('#mapListPaging>.pagination').delegate('.mapListChang', 'click', function (e) {
            if (mapsCurrentPage != parseInt(e.currentTarget.text)) {
                mapsCurrentPage = parseInt(e.currentTarget.text)
                paginationClick(mapsCurrentPage);
            }
        });
        //切换到上一页
        $(".glyphicon-chevron-left").parent().click(function () {
            mapsCurrentPage--;
            paginationClick(mapsCurrentPage);
        });
        //切换到下一页
        $(".glyphicon-chevron-right").parent().click(function () {
            mapsCurrentPage++;
            paginationClick(mapsCurrentPage);
        });
    });

    // 查询iPortal中的地图
    function queryMaps(queryParams) {
        iPoortalMaps.queryMaps(queryParams).then(function (mapsData) {
            //返回的结果集，需要查看可打开下行代码
            // console.log(mapsData);
            $("#mapList").children().remove();
            //将结果集进行遍历，并添加到HTML中
            $.each(mapsData.content, function (i) {
                //解析时间戳，可根据需求自行处理
                var createTime = new Date(parseInt(mapsData.content[i].createTime)).toLocaleString();
                var mapDOM = $("<div class='col-md-4 gallery-item'>" +
                    "<div class='gallery-item-border'>" +
                    "<a href='JavaScript:void(0)' target='_blank' class='thumbnail' style='margin-bottom: 10px'>" +
                    "<img  class='gallery-item-img' src='" + mapsData.content[i].thumbnail + "' alt=''>" +
                    "</a>" +
                    "<div>" +
                    "<p class='mapDetails'>" + mapsData.content[i].title + "</p>" +
                    "<p class='mapDetails'>" + resources.text_createdIn + '：' + createTime + "<span class='mapTime'>" + "</span>" + "</p>" +
                    "<div class='mapUserDetails'>" +
                    "<div class='textEllipsis'>" +
                    "<span class='glyphicon glyphicon-user'>" + "</span>" + "&nbsp;" + mapsData.content[i].userName +
                    "</div>" +
                    "<div class='mapBottomList'>" +
                    "<span class='glyphicon glyphicon-eye-open'>" + "</span>" +
                    "<span style='text-align: center'>" + "&nbsp;" + mapsData.content[i].visitCount + "</span>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>" +
                    "</div>")
                $("#mapList").append(mapDOM);
            });
            //初始化分页列表以及分页数目发生变化时执行一下
            if (!totalPages || totalPages !== mapsData.totalPage) {
                totalPages = mapsData.totalPage;
                initPages(mapsData.totalPage);
            }
        })
    };

    // 初始化分页列表UI
    function initPages(totalPage) {
        for (var i = 0; i < totalPage; i++) {
            if (i == (mapsCurrentPage - 1)) {
                var mapListPaging = $("<li>" + "<a href='JavaScript:void(0)' class='mapListChang active' >" + (i + 1) + "</a>" + "</li>")
            } else {
                var mapListPaging = $("<li>" + "<a href='JavaScript:void(0)' class='mapListChang ' >" + (i + 1) + "</a>" + "</li>")
            }
            mapListPaging.insertBefore($("#mapListPaging>.pagination>li:last-child"))
        }
        //根据初始页面的设置，判断向前/后 翻页按钮是否需要禁止点击
        if (mapsCurrentPage == 1) {
            $(".glyphicon-chevron-left").parent().addClass('disable');
        } else if (mapsCurrentPage == totalPage) {
            $(".glyphicon-chevron-right").parent().addClass('disable');
        }
    };

    //页面的点击事件，触发的function
    function paginationClick(mapsCurrentPage) {
        if (mapsCurrentPage == 1) {
            $(".glyphicon-chevron-left").parent().addClass('disable');
            $(".glyphicon-chevron-right").parent().removeClass('disable');
        } else if (mapsCurrentPage == totalPages) {
            $(".glyphicon-chevron-right").parent().addClass('disable');
            $(".glyphicon-chevron-left").parent().removeClass('disable');
        } else {
            $(".glyphicon-chevron-left").parent().removeClass('disable');
            $(".glyphicon-chevron-right").parent().removeClass('disable');
        }
        queryParams = new SuperMap.iPortalMapsQueryParam({
            currentPage: mapsCurrentPage,
            pageSize: mapsPageSize,
        });
        queryMaps(queryParams);
        $("#mapListPaging>.pagination>li").eq(mapsCurrentPage).children().addClass('active').parent().siblings().children().removeClass('active');
    }
</script>
</body>
</html>